Add the following scripts to your `package.json`:

```json filename="package.json"
"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
},
```

> [!TIP]
>
> You can enable Turbopack in development by appending the `--turbopack` flag to
> the `dev` command:
>
> ```diff filename="package.json"
> - "dev": "next",
> + "dev": "next --turbopack",
> ```

You can start the server in development mode with the following command
according to your package manager:

```sh npm2yarn
npm run dev
```

or in production mode:

```sh npm2yarn
npm run build
npm run start
```

> [!NOTE]
>
> If you're not familiar with Next.js, note that development mode is
> significantly slower since Next.js compiles every page you navigate to.

### Add Next.js config

Create a `next.config.mjs` file in your project's root directory with the
following content:

```js filename="next.config.mjs"
import nextra from 'nextra'

// Set up Nextra with its configuration
const withNextra = nextra({
  // ... Add Nextra-specific options here
})

// Export the final Next.js config with Nextra included
export default withNextra({
  // ... Add regular Next.js options here
})
```

With this configuration, Nextra will handle Markdown files in your Next.js
project. For more Nextra configuration options, check out the
[Guide](/docs/guide).

### Add [`mdx-components` file](/docs/file-conventions/mdx-components-file)

### Setup search

To set up search, follow the instructions on the
[Search Engine](/docs/guide/search#setup) page.

### Create the root layout

Next, create the root layout of your application inside the `app` folder. This
layout will be used to configure your Nextra Theme:
